<template>
  <div class="wrapper">
    <div class="leftWrapper">
      <BreadCrumb />
      <DetailHeader :details="headerDetails" />
      <DetailContent v-if="pageType.toString() !== '2'" :contentArr="contentArr" />
      <DetailMiniServiceContent :serviceInfo="formatedData" v-else />
    </div>
    <div class="rightWrapper">
      <DetailRight />
    </div>
  </div>
</template>
<script>
import BreadCrumb from '@/components/BreadCrumb'
import DetailHeader from '@/components/DetailHeader'
import DetailContent from '@/components/DetailContent'
import DetailRight from '@/components/DetailRight'
import DetailMiniServiceContent from '@/components/DetailMiniServiceContent'
import { mapState } from 'vuex'
import { decodeBase64 } from '../../utils/commonUtils'
export default {
  data() {
    return {
      contentArr: [],
      formatedData: {},
      headerDetails: {}
    }
  },
  components: {
    DetailHeader,
    DetailContent,
    DetailRight,
    DetailMiniServiceContent,
    BreadCrumb
  },
  computed: {
    ...mapState({
      pageType: (state) => state.detail.detailType,
      detailInfo: (state) => state.detail.detailInfo,
      currentTab: (state) => state.home.currentTab,
      loginInfo: (state) => state.login.loginInfo
    })
  },
  methods: {
    formatData() {
      if (Object.keys(this.detailInfo).length === 0) {
        return
      }
      this.headerDetails = {
        id: this.detailInfo.id,
        name: this.detailInfo.name,
        nickname: this.detailInfo.nickname,
        status: this.detailInfo.status,
        subscribAmount: this.detailInfo.subscriptions,
        subscribeState: this.detailInfo.subscribeState
      }
      if (this.pageType.toString() !== '2') {
        this.contentArr = [
          {
            name: `${
              (this.$route.query.type
                ? sessionStorage.getItem('currentTabBackup')
                : this.currentTab) === '1'
                ? '应用'
                : '模型'
            }简介`,
            content: this.detailInfo.description
          },
          { name: '使用场景', content: this.detailInfo.usePlace }
        ]
      } else {
        this.formatedData = {
          api: {
            url: this.detailInfo.apiUrl,
            resFormat: this.detailInfo.resType,
            requestWay: this.detailInfo.reqMode === 1 ? 'post' : 'get',
            requestExample: this.detailInfo.reqSample || '',
            responseExample: this.detailInfo.resSample || ''
          },
          reqParam: this.detailInfo.reqParam || [],
          resParam: this.detailInfo.resParam || [],
          description: this.detailInfo.description
        }
      }
    }
  },
  created() {
    const params = {
      params: {
        id: decodeBase64(this.$route.query.id)
      },
      currentTab: this.$route.query.type ? decodeBase64(this.$route.query.type) : this.currentTab
    }
    if (localStorage.getItem('loginToken')) {
      params.params.subscriber =
        this.loginInfo.id || sessionStorage.getItem('loginUserId')
    }
    this.$store.dispatch('detail/getDetails', params).then(() => {
      this.formatData()
      this.$store.dispatch('detail/getUserInfo', { id: this.detailInfo.createBy })
    })
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 78vw;
  height: 100%;
  margin: 0 auto;
  display: flex;
  .leftWrapper {
    flex: 1;
    background: #fff;
    /*border-right: solid #dcdfea 1px;*/
  }
  .rightWrapper {
    flex: 0 0 400px;
    background: #fff;
    margin-left: 24px;
  }
}
</style>
